1
00:00:03,000 --> 00:00:06,478
เราได้ตั้งค่าโครงการ Next.js เริ่มต้นของเราแล้ว

2
00:00:06,478 --> 00:00:09,186
และเราเริ่มพัฒนาท้องถิ่น

3
00:00:09,186 --> 00:00:11,818
เซิร์ฟเวอร์ด้วยคำสั่ง "next dev"

4
00:00:11,893 --> 00:00:15,418
ทีนี้ ถ้าเราลองเปิดเว็บไซต์ของเราในเบราว์เซอร์

5
00:00:15,418 --> 00:00:18,698
ในขณะนี้เราเพิ่งได้รับข้อความ "ไม่พบ"

6
00:00:18,698 --> 00:00:22,749
เพราะเรายังไม่มีหน้าใด ๆ ในแอปของเรา

7
00:00:22,749 --> 00:00:26,059
เรามาหยุดเซิร์ฟเวอร์กันก่อน

8
00:00:26,059 --> 00:00:28,400
และดูวิธีการกำหนดเพจ

9
00:00:28,480 --> 00:00:31,807
เราสามารถเพิ่มโฮมเพจได้ง่ายๆ ด้วยการสร้าง

10
00:00:31,807 --> 00:00:34,647
ไฟล์ใหม่ภายในโฟลเดอร์ "แอพ"

11
00:00:34,728 --> 00:00:37,490
เรียกว่า "page.jsx"

12
00:00:37,490 --> 00:00:39,968
เช่นเดียวกับไฟล์ "เลย์เอาต์"

13
00:00:39,968 --> 00:00:43,784
ไฟล์ "เพจ" จะต้องส่งออกส่วนประกอบ React

14
00:00:43,784 --> 00:00:45,876
เรียกมันว่า "หน้าแรก"

15
00:00:46,184 --> 00:00:49,562
และที่นี่เราสามารถส่งคืนองค์ประกอบ JSX บางส่วนได้

16
00:00:49,562 --> 00:00:52,952
เริ่มต้นด้วยหัวข้อ "h1" ง่ายๆ

17
00:00:52,952 --> 00:00:55,647
พูดว่า "หน้า Next.js หน้าแรกของฉัน"

18
00:00:55,734 --> 00:00:59,176
นี่จะเป็นเนื้อหาในหน้าแรกของเรา

19
00:00:59,176 --> 00:01:01,811
มาบันทึกไฟล์นี้แล้วเริ่มกันเลย

20
00:01:01,811 --> 00:01:03,682
เซิร์ฟเวอร์ในเทอร์มินัล

21
00:01:03,752 --> 00:01:06,281
ตอนนี้เนื่องจากเราจะใช้คำว่า "next

22
00:01:06,281 --> 00:01:08,160
dev" คำสั่งตลอดเวลา

23
00:01:08,232 --> 00:01:10,631
จะดีกว่าถ้าเราเพิ่ม "สคริปต์"

24
00:01:10,631 --> 00:01:12,505
ไปยังไฟล์ package.json ของเรา

25
00:01:12,580 --> 00:01:15,155
เราสามารถกำหนดสคริปต์ "dev" ได้

26
00:01:15,155 --> 00:01:17,275
รันคำสั่ง "next dev"

27
00:01:17,350 --> 00:01:19,041
ด้วยวิธีนี้ในอาคารผู้โดยสาร

28
00:01:19,110 --> 00:01:22,219
เราสามารถพิมพ์ "npm run dev" แทนได้

29
00:01:22,219 --> 00:01:25,185
และสิ่งนี้จะดำเนินการ "next dev"

30
00:01:25,185 --> 00:01:28,151
เริ่มต้นเซิร์ฟเวอร์บนพอร์ต 3000

31
00:01:28,240 --> 00:01:31,857
โดยแสดงสคริปต์ทั้งหมดของเราใน package.json

32
00:01:31,857 --> 00:01:34,527
นอกจากนี้ยังง่ายต่อการดูว่าคำสั่งใด

33
00:01:34,527 --> 00:01:36,565
มีอยู่ในโครงการของเรา

34
00:01:36,635 --> 00:01:39,053
อย่างไรก็ตาม ถ้าเรากลับไปที่เบราว์เซอร์

35
00:01:39,053 --> 00:01:40,360
และโหลดหน้าซ้ำ

36
00:01:40,426 --> 00:01:42,586
คุณจะเห็นได้ว่าตอนนี้กำลังแสดงอยู่

37
00:01:42,586 --> 00:01:44,747
หัวข้อที่เราเขียนในโค้ดของเรา

38
00:01:44,812 --> 00:01:48,684
หน้าแรกของเราจึงแสดงอย่างถูกต้อง

39
00:01:48,684 --> 00:01:51,508
ตอนนี้ในขณะที่ทำงานบนเพจของเรา ฉันจะทำ

40
00:01:51,508 --> 00:01:54,332
ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เสมอ

41
00:01:54,406 --> 00:01:56,651
ที่คุณสามารถเปิดได้จากเมนูนี้

42
00:01:56,651 --> 00:01:58,557
หรือด้วยแป้นพิมพ์ลัด

43
00:01:58,625 --> 00:02:01,488
วิธีนี้ทำให้เราสามารถดูข้อความบันทึกได้

44
00:02:01,488 --> 00:02:03,317
พิมพ์ไปที่คอนโซล

45
00:02:03,397 --> 00:02:06,751
สำหรับวิดีโอส่วนใหญ่ ฉันจะเก็บเบราว์เซอร์ไว้ด้วย

46
00:02:06,751 --> 00:02:09,583
ในหน้าต่างเล็กๆ ทางด้านขวา

47
00:02:09,657 --> 00:02:12,036
และหน้าต่าง Visual Studio Code

48
00:02:12,036 --> 00:02:13,909
บนหน้าจอที่เหลือ

49
00:02:13,981 --> 00:02:16,957
เพื่อให้คุณสามารถเห็นทั้งโค้ดในตัวแก้ไข

50
00:02:16,957 --> 00:02:19,341
และในขณะเดียวกันก็หน้าอะไร

51
00:02:19,341 --> 00:02:21,164
ดูเหมือนในเบราว์เซอร์

52
00:02:21,234 --> 00:02:24,101
เซิร์ฟเวอร์ dev จะอัปเดตโดยอัตโนมัติ

53
00:02:24,101 --> 00:02:26,753
หน้าเมื่อใดก็ตามที่เราแก้ไขโค้ดของเรา

54
00:02:26,825 --> 00:02:29,402
เรามาเปลี่ยนหัวข้อนี้กัน เช่น

55
00:02:29,565 --> 00:02:31,845
และตั้งเป็น "Indie Gamer" นั่นเอง

56
00:02:31,845 --> 00:02:34,055
จะเป็นชื่อของเว็บไซต์ของเรา

57
00:02:34,124 --> 00:02:37,000
ทันทีที่เราบันทึกการเปลี่ยนแปลงนี้ หน้านั้น

58
00:02:37,000 --> 00:02:39,444
จะอัปเดตและแสดงข้อความใหม่

59
00:02:39,516 --> 00:02:41,589
ส่วนใหญ่แล้วเราจะออกไปได้

60
00:02:41,589 --> 00:02:43,448
แผงขั้วต่อปิด

61
00:02:43,519 --> 00:02:46,651
เซิร์ฟเวอร์ dev จะยังคงทำงานอยู่ต่อไป

62
00:02:46,651 --> 00:02:49,187
เราสามารถเพิ่มย่อหน้าในหน้านี้

63
00:02:49,291 --> 00:02:51,560
พร้อมสโลแกนว่า “เท่านั้น.

64
00:02:51,560 --> 00:02:53,343
เกมอินดี้ที่ดีที่สุด"

65
00:02:53,424 --> 00:02:54,878
"ตรวจสอบสำหรับคุณ"

66
00:02:56,064 --> 00:03:00,275
ตอนนี้ใน JSX เราต้องมีองค์ประกอบรูตเดียว

67
00:03:00,275 --> 00:03:03,700
ดังนั้นฉันจะรวมทุกอย่างไว้ในส่วนของ React

68
00:03:03,700 --> 00:03:05,669
นั่นคือองค์ประกอบพิเศษนี้

69
00:03:05,669 --> 00:03:07,356
เขียนเป็นแท็กเปล่า

70
00:03:07,427 --> 00:03:09,873
วิธีนี้จะทำให้เพจแสดงผลทั้งสองอย่าง

71
00:03:09,873 --> 00:03:12,031
หัวเรื่องและย่อหน้า

72
00:03:12,103 --> 00:03:14,605
ดังนั้นหน้านี้จึงใช้งานได้ค่อนข้างมาก

73
00:03:14,605 --> 00:03:17,106
เช่นเดียวกับส่วนประกอบ React อื่นๆ

74
00:03:17,187 --> 00:03:19,801
มีอะไรพิเศษเกี่ยวกับ Next.js

75
00:03:19,801 --> 00:03:22,236
และ App Router ก็คือ

76
00:03:22,326 --> 00:03:25,562
สิ่งที่อยู่ในหน้าจะถูกแทรกลงไป

77
00:03:25,562 --> 00:03:28,716
เอกสารที่กำหนดโดย RootLayout

78
00:03:28,797 --> 00:03:31,553
ขณะนี้เค้าโครงนี้เพียงแค่แสดง

79
00:03:31,553 --> 00:03:33,863
เด็กที่อยู่ใน "ร่างกาย"

80
00:03:33,937 --> 00:03:36,827
แต่เราสามารถเพิ่มองค์ประกอบอื่นๆ ลงไปได้

81
00:03:36,827 --> 00:03:39,505
ตัวอย่างเช่น ในแอปส่วนใหญ่เราจะต้องการ

82
00:03:39,505 --> 00:03:42,182
"ส่วนหัว" ทั่วไปสำหรับทุกหน้า

83
00:03:42,256 --> 00:03:46,049
ฉันจะเขียนข้อความตัวยึดตำแหน่งบางส่วนในตอนนี้

84
00:03:46,049 --> 00:03:49,704
จากนั้นเนื้อหาของหน้าจะเป็นศูนย์กลาง

85
00:03:49,704 --> 00:03:53,108
จริงๆ แล้ว เราสามารถรวมมันไว้ในองค์ประกอบ "หลัก" ได้

86
00:03:53,108 --> 00:03:55,630
อันเป็นแนวทางปฏิบัติที่ดีและจะ

87
00:03:55,630 --> 00:03:57,634
ยังมีประโยชน์สำหรับการจัดแต่งทรงผมอีกด้วย

88
00:03:57,708 --> 00:04:00,626
โดยทั่วไปเราต้องการ "ส่วนท้าย" เช่นกัน

89
00:04:00,788 --> 00:04:03,052
กำลังแสดงเนื้อหาอื่นๆ

90
00:04:03,052 --> 00:04:05,716
และถ้าเราบันทึกเค้าโครงที่อัปเดตแล้ว

91
00:04:05,716 --> 00:04:07,983
คุณจะเห็นได้ว่าเพจของเราตอนนี้

92
00:04:07,983 --> 00:04:10,017
มีส่วนหัวและส่วนท้าย

93
00:04:10,095 --> 00:04:13,197
ยังไงก็ตาม ฉันใส่ข้อความในวงเล็บเหลี่ยม

94
00:04:13,197 --> 00:04:16,161
เพียงเพื่อระบุว่าพวกมันคือตัวยึดตำแหน่ง

95
00:04:16,230 --> 00:04:19,728
มันไม่ใช่ไวยากรณ์พิเศษหรืออะไรทำนองนั้น

96
00:04:19,728 --> 00:04:22,269
ประเด็นก็คือองค์ประกอบที่เรา

97
00:04:22,269 --> 00:04:24,425
กลับมาในองค์ประกอบของหน้า

98
00:04:24,502 --> 00:04:27,285
จะแสดงผลภายในสิ่งเหล่านั้นจาก

99
00:04:27,285 --> 00:04:29,233
ส่วนประกอบเค้าโครง

100
00:04:29,326 --> 00:04:31,599
ดังนั้นในแง่นี้คุณสามารถคิดได้

101
00:04:31,599 --> 00:04:33,720
ของเค้าโครงเป็นเทมเพลต

102
00:04:33,796 --> 00:04:36,479
ที่จะนำไปใช้กับทุกหน้า